<template>
  <div>
    <el-upload
      :action="elAction"
      :ext="elExt"
      :data="elData"
      :file-list="elFileList"
      :limit="elLimit"
      :on-exceed="onElExceed"
      :before-upload="beforeElUpload"
      :on-remove="onElRemove"
      :before-remove="beforeElRemove"
      :on-success="onElSuccess"
      :on-error="onElError"
      :on-change="onElChange"
      :list-type="elListType"
      :on-preview="pictureCardPreview"
      :class="{elExceed:checkLimit}"
      :name="elName"
    >
      <i v-if="isImage" class="el-icon-plus" />
      <el-button v-else size="small" type="primary">点击上传</el-button>
      <div v-if="tip" slot="tip" class="el-upload__tip">{{ tip }}</div>
    </el-upload>
    <el-dialog v-if="isImage" :visible.sync="dialogVisible" size="tiny">
      <img :src="dialogImageUrl" alt >
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      default: function() {
        return {}
      }
    },
    name: {
      type: String,
      default: 'upfile'
    },
    tip: {
	  type: String,
	  default: ''
    },
    limit: {
      type: Number,
      default: 0
    },
    fileList: {
      type: Array,
      default: function() {
        return []
      }
    },
    ext: {
      type: String,
      default: '.jpg,.png,.gif,.jpeg'
    },
    maxSize: {
      type: Number,
      default: 1204
    },
    action: {
      type: String,
      default: ''
    },
    listType: {
      type: String,
      default: 'picture-card'
    },
    sortable: { type: Boolean, default: false },
    onPreview: { type: Function, default: function() {} },
    onRemove: { type: Function, default: function() {} },
    onSuccess: { type: Function, default: function() {} },
    onError: { type: Function, default: function() {} },
    onProgress: { type: Function, default: function() {} },
    onChange: { type: Function, default: function() {} },
    beforeUpload: {
      type: Function,
      default: function() {
        return true
      }
    },
    beforeRemove: {
      type: Function,
      default: function() {
        return true
      }
    }
  },
  data: function() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      elAction: this.action,
      elSortable: this.sortable,
      elCount: 0,
      elData: this.data,
      elFileList: this.fileList,
      elLimit: this.limit,
      elExt: this.ext,
      elMaxSize: this.maxSize,
      elName: this.name,
      elListType: this.listType
    }
  },
  computed: {
    checkLimit: function() {
      // console.log(this.elLimit > 0 && this.elCount >= this.elLimit)
      return this.elLimit > 0 && this.elCount >= this.elLimit
    },
    isImage: function() {
      return this.elListType === 'picture-card'
    }
  },
  watch: {
    fileList() {
      this.elFileList = this.fileList
    },
    elFileList: {
      handler(newName, oldName) {
        this.$emit('input', JSON.stringify(newName)) // 传值给父组件, 让父组件监听到这个变化
      },
      immediate: true // 代表在wacth里声明了firstName这个属性之后立即先去执行handler方法
    }
  },
  created: function() {
    console.log(this.elFileList)
    this.elCount = this.elFileList.length
  },
  mounted: function() {
    // var that = this
    // if (this.elSortable) {
    //   var list = this.$el.querySelector('.el-upload-list')
    //   new Sortable(list, {
    //     onEnd: function(ev) {
    //       var arr = that.elFileList
    //       arr[ev.oldIndex] = arr.splice(ev.newIndex, 1, arr[ev.oldIndex])[0]
    //     }
    //   })
    // }
  },
  methods: {
    beforeElUpload: function(file) {
      console.log('beforeUpload')
      var ext = this.elExt
      var maxSize = this.elMaxSize
      var isOkExt =
        ext.indexOf(file.name.substring(file.name.lastIndexOf('.'))) >= 0
      if (!isOkExt) {
        this.$message.error('只能上传' + ext + '格式的文件')
        return false
      }
      var isLtmaxWidth = file.size / 1024 < maxSize
      if (!isLtmaxWidth) {
        this.$message.error('上传文件大小不能超过' + maxSize + 'KB!')
        return false
      }
      return this.beforeUpload(file)
    },
    onElSuccess: function(response, file, fileList) {
      this.elCount = fileList.length
      response.name = file.name
      response.url = file.url
      this.elFileList.push(response)
      this.onSuccess(response, file, fileList)
    },
    onElError: function(err, file, fileList) {
      this.onError(err, file, fileList)
    },
    onElChange: function(file, fileList) {
      this.onChange(file, fileList)
    },
    onElProgress: function(event, file, fileList) {
      this.onProgress(event, file, fileList)
    },
    onElRemove: function(file, fileList) {
      this.elCount = fileList.length
      this.elFileList = fileList
      this.onRemove(file, fileList)
    },
    beforeElRemove: function(file, fileList) {
      return this.beforeRemove(file, fileList)
    },
    onElExceed: function(files, fileList) {
      this.$message.error('只能上传' + this.elLimit + '个文件!')
    },
    pictureCardPreview: function(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>
